/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-12-09 13:51:15
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2023-01-09 11:29:55
 * @FilePath: \adminstration\src\Pages\Front\Common\Options\FilesCommon.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Tooltip, message } from 'antd'
import { useState } from 'react'
import { CommonSmallTitle } from '../Other/SmallTitle'
import { useRequest, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { AttachmentList, AttachmentDetail } from '../LargeScreen/AttachmentWindow'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'
import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const FilesCommonOuterLayerBox = ({ className, title, flex, data, color, parameter }) => {
    const [ModalState, { setTrue, setFalse }] = useBoolean(false)
    const [Uuid, setUuid] = useState()
    const [Title, setTitle] = useState()
    return (
        <CommonSmallTitle className={className} title={title} flex={flex}>
            <div className="FilesCommonOuterLayerBox">
                {data.map(({ uuid, title, time, icon }) => (
                    // <Tooltip key={uuid} placement="topLeft" title={title} color={color}>
                    <div
                        key={uuid}
                        onClick={() => {
                            setUuid(uuid)
                            setTitle(title)
                            setTrue()
                        }}
                    >
                        {icon}
                        <div>
                            <span>{title}</span>
                        </div>
                        <div>{time}</div>
                    </div>
                    // </Tooltip>
                ))}
            </div>
            {ModalState && (
                <LargeScreenTablesModal
                    className={className}
                    Off={setFalse}
                    title={Title}
                    parameter={{ ...parameter, uuid: Uuid }}
                />
            )}
        </CommonSmallTitle>
    )
}

export const FilesCommonOuterLayerList = ({ className, title, flex, data, color, parameter }) => {
    const [ListState, { setTrue: ListStateTrue, setFalse: ListStateFalse }] = useBoolean(false)
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()

    const [ModalState, { setTrue, setFalse }] = useBoolean(false)

    const { run: getConstructionInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            if (list.length === 0) {
                message.info('没有附件信息!')
            } else if (list.length === 1) {
                const [data] = list
                setAttList(data)
                ViewStateTrue()
            } else {
                setAttList(list)
                ListStateTrue()
            }
        },
    })

    return (
        <>
            <CommonSmallTitle className={className} title={title} flex={flex}>
                <div className="FilesCommonOuterLayerList">
                    <div className="Box">
                        {data.map(({ uuid, title, time, icon }) => (
                            <Tooltip key={uuid} placement="topLeft" title={title} color={color}>
                                <div
                                    onClick={() => {
                                        getConstructionInfoManageDetail({
                                            url: 'getConstructionInfoManageDetail',
                                            data: { InfoManageUuid: uuid },
                                        })
                                    }}
                                >
                                    {icon}
                                    <div>
                                        <span>{title}</span>
                                    </div>
                                    <div>{time}</div>
                                </div>
                            </Tooltip>
                        ))}
                    </div>
                    <div className="More">
                        <div onClick={() => setTrue()}>
                            <img src={imageUrl + 'More.png'} alt="" />
                            <div>查看更多</div>
                        </div>
                    </div>
                </div>
            </CommonSmallTitle>
            {ListState && AttList && <AttachmentList data={AttList} className={className} Off={ListStateFalse} />}
            {ViewState && AttList && <AttachmentDetail data={AttList} className={className} Off={ViewStateFalse} />}
        </>
    )
}
